<template>
    <div class="feature-content">
        <div class="w1200">
            <div class="title">功能全面，简单好用</div>
            <div class="feature-card">
                <div v-for="value in featureList" class="featureItem">
                    <div class="feature-img">
                        <img :src="value.img" alt="">
                    </div>
                    <div class="feature-desc">{{ value.desc }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const featureList = ref([
    {
        img: 'https://image.lutongjiakao.com/system/44586bd6f8464fffaa89684b9b04b86a.png',
        desc: '渠道管理'
    },
    {
        img: 'https://image.lutongjiakao.com/system/4df4797b68b94e99b1451c11ee7556b8.png',
        desc: '驾校管理'
    },
    {
        img: 'https://image.lutongjiakao.com/system/9a11e3dbaa5542cc9061f5a33dcd7970.png',
        desc: '班型管理'
    },
    {
        img: 'https://image.lutongjiakao.com/system/ebfde66e9d60469bba3c311ffd69df53.png',
        desc: '装修管理	'
    },
    {
        img: 'https://image.lutongjiakao.com/system/123729ae74d444c0836a15e2896d1b57.png',
        desc: '题库管理'
    },
    {
        img: 'https://image.lutongjiakao.com/system/9ac03dc633204569bc633ce09846f083.png',
        desc: '营销管理'
    },
    {
        img: 'https://image.lutongjiakao.com/system/08e0ec73305441a0808bda1dbd63b400.png',
        desc: '订单管理'
    },
    {
        img: 'https://image.lutongjiakao.com/system/61d5dd29f99a4b6ba92bad5ddbfd9d77.png',
        desc: '用户管理'
    },
    {
        img: 'https://image.lutongjiakao.com/system/b5757f75a3a449b38b89280aa65be65a.png',
        desc: '学员管理'
    },
    {
        img: 'https://image.lutongjiakao.com/system/aad55f05f5814236b96782e15e72c1f9.png',
        desc: '数据概况	'
    },
    {
        img: 'https://image.lutongjiakao.com/system/59e306811af24f3281141bd91974e327.png',
        desc: '客服管理'
    },
    {
        img: 'https://image.lutongjiakao.com/system/5500dfee2f9942db93ddd254ba68dce9.png',
        desc: '日志管理'
    },
    {
        img: 'https://image.lutongjiakao.com/system/394f494bc9f04804a1946206712690a6.png',
        desc: '员工权限	'
    },
    {
        img: 'https://image.lutongjiakao.com/system/5cb4a20b5fec4a45b31b772fc5b7ca28.png',
        desc: '素材管理'
    },
    {
        img: 'https://image.lutongjiakao.com/system/4194c8ea0a524799b5e2e363b1d789a4.png',
        desc: '更新记录'
    },
])
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.w1200 {
    width: rem(900);
    margin: 0 auto;
}

.feature-content {
    // background: rgb(242, 251, 247);
    background: #fff;
    padding: rem(60) 0;
}

.title {
    font-size: rem(36);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: rem(60);
}

.feature-card {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: rem(40);
    justify-items: center;
}

.featureItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: rem(20) 0;

    &:hover {
        transform: translateY(rem(-10));
        box-shadow: 0 rem(10) rem(20) rgba(0, 0, 0, 0.2);
    }
}

.feature-img {
    width: rem(63);
    height: rem(63);

    img {
        width: 100%;
        height: 100%;
    }
}

.feature-desc {
    color: rgb(34, 34, 34);
    margin-top: rem(10);
    font-size: rem(16);
}
</style>